<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="styles/dzbase.css" />
        <script type="text/javascript" src="scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="scripts/utils.js">
        </script>
        <script type="text/javascript" src="scripts/form/FileUploadField.js">
        </script>
		 <script type="text/javascript" src="scripts/i18nMessage.js">
        </script>
        <script type="text/javascript">
            var tcId = getPrarmeterValue(window.location, 'id');
            var tcXmlLoader = new xmlLoader('TechnicChartServlet?action=3&id=' + tcId);
			var tcYarnForm;
			var tcYarnGrid;
            var tcYarnStore;
			
            var tcXMLReader = new Ext.data.XmlReader({
                record: 'item'
            }, [{
                name: 'id',
                mapping: 'id'
            }, {
                name: 'reference',
                mapping: 'reference'
            }, {
                name: 'photoName',
                mapping: 'photoName'
            }, {
                name: 'weight',
                mapping: 'weight'
            }, {
                name: 'diffCoefficient',
                mapping: 'diffCoefficient'
            }, {
                name: 'needle',
                mapping: 'needle'
            }, {
                name: 'cotation',
                mapping: 'cotation'
            }, {
                name: 'comment',
                mapping: 'comment'
            }]);
            
			var itemTplMarkup = [
						'<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td style="background:#eeeeee; width: 20%;">',
							'ID',
							'</td><td colspan="3">{id}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							'Reference',
							'</td><td colspan="3">{reference}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							'Weight(kg)',
							'</td><td>{weight}</td>',
							'<td style="background:#eeeeee;">',
							'Needle',
							'</td><td>{needle}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							'Cotation',
							'</td><td>{cotation}</td>',
							'<td style="background:#eeeeee;">',
							'Difficuty Coefficient',
							'</td><td>{diffCoefficient}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							'Comment',
							'</td><td colspan="3">{comment}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							'Photo',
							'</td><td colspan="3"><img id="customImg" height="250" src="_temp/{photoName}"></td></tr>',
						'</tbody></table><div id="itemList"></div>'
					];
			var tcRecord = tcXMLReader.readRecords(tcXmlLoader.getXml()).records[0];
            var itemTpl = new Ext.Template(itemTplMarkup);
			
			
			var yarnXmlLoader = new xmlLoader('YarnServlet?action=5');
            var yarnStore = new Ext.data.Store({
                reader: new Ext.data.XmlReader({
                    record: 'item',
                    id: 'id',
                    totalRecords: 'itemTotal'
                }, ['id', 'name', 'price', 'comment', 'weight1', 'coefficient1', 'weight2', 'coefficient2', 'weight3', 'coefficient3']),
                data: yarnXmlLoader.getXml()
            });
            
            var yarnCombo = new Ext.form.ComboBox({
                fieldLabel: 'Yarn',
                name: 'yarnId',
                store: yarnStore,
                displayField: 'name',
                valueField: 'id',
                typeAhead: true,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                emptyText: 'Select a yarn...',
                selectOnFocus: true,
                allowBlank: false,
                blankText: 'This fieled must be filled out.'
            });
			
			 var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: 'TechnicChartServlet?action=202&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                tcYarnStore.reload();
                                messageTip.msg('Tip', 'Delete item successfully');
                            }
                            else {
                                messageTip.msg('Tip', 'Delete item unsuccessfully');
                            }
                        },
                        failure: function(o){
                             messageTip.msg('Tip', 'Delete item failed');
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
                tcYarnForm.getForm().load({
                    url: 'TechnicChartServlet?action=203&id=' + editId,
                    waitMsg: Ext.LoadMask.prototype.msg,
                    success: function(form, action){
						
                    }
                });
            }
            
			 function renderEdit(value, p, record){
                    return String.format('<a href="javascript:editItem(editCallback, {0});" target="_self"><img src="images/icons/pencil.png" title="edit" /></a>', record.id);
             }
            
             function renderDelete(value, p, record){
                return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="images/icons/delete.png" title="delete"/></a>', record.id);
             }
				
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
				
				itemTpl.append('technicChartDiv', tcRecord.data);
                
				tcYarnForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    labelWidth: 200, // label settings here cascade unless overridden
                    url: 'TechnicChartServlet?action=200',
                    frame: true,
                    collapsible: true,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'unitPrice',
                        mapping: 'unitPrice'
                    }, {
                        name: 'q1',
                        mapping: 'q1'
                    }, {
                        name: 'c1',
                        mapping: 'c1'
                    },{
                        name: 'q2',
                        mapping: 'q2'
                    }, {
                        name: 'c2',
                        mapping: 'c2'
                    },{
                        name: 'q3',
                        mapping: 'q3'
                    }, {
                        name: 'c3',
                        mapping: 'c3'
                    },{
                        name: 'q4',
                        mapping: 'q4'
                    }, {
                        name: 'c4',
                        mapping: 'c4'
                    },{
                        name: 'q5',
                        mapping: 'q5'
                    }, {
                        name: 'c5',
                        mapping: 'c5'
                    },{
                        name: 'otherCo',
                        mapping: 'otherCo'
                    },{
                        name: 'yarnId',
                        mapping: 'yarnId'
                    }]),
                    title: 'Edit technical chart material',
                    bodyStyle: 'padding:5px 5px 5px 5px;',
                       
                    items: [{
                        layout: 'column',
                        items: [{
							name: 'id',
							id: 'id',
							xtype: 'hidden'
						},{
							name: 'tcId',
							id: 'tcId',
							xtype: 'hidden',
							value: tcRecord.data.id
						},{
                            columnWidth: .5,
                            layout: 'form',
                            items: [yarnCombo,{
								fieldLabel: ' <b><=</b> quantity1',
								width: '80%',
	                            name: 'q1',
	                            id: 'q1',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: 'quantity1 <b><</b>,&nbsp;,<b><=</b> quantity2',
								width: '80%',
	                            name: 'q2',
	                            id: 'q2',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: 'quantity2 <b><</b>,&nbsp;,<b><=</b> quantity3',
								width: '80%',
	                            name: 'q3',
	                            id: 'q3',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: 'quantity3 <b><</b>,&nbsp;,<b><=</b> quantity4',
								width: '80%',
	                            name: 'q4',
	                            id: 'q4',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: 'quantity4 <b><</b>,&nbsp;,<b><=</b> quantity5',
								width: '80%',
	                            name: 'q5',
	                            id: 'q5',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							}]
                        }, {
                            columnWidth: .5,
                            layout: 'form',
                            items: [{
								fieldLabel: 'Unit price&nbsp;&nbsp;<b>(€)</b>',
								width: '80%',
	                            name: 'unitPrice',
	                            id: 'unitPrice',
	                            allowBlank: false,
	                            blankText: 'This fieled must be filled out.',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: '<b>X</b> coefficient1',
								width: '80%',
	                            name: 'c1',
	                            id: 'c1',
								value: '1.25',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: '<b>X</b> coefficient2',
								width: '80%',
	                            name: 'c2',
	                            id: 'c2',
								value: '1.20',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: '<b>X</b> coefficient3',
								width: '80%',
	                            name: 'c3',
	                            id: 'c3',
								value: '1.15',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: '<b>X</b> coefficient4',
								width: '80%',
	                            name: 'c4',
	                            id: 'c4',
								value: '1.10',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							},{
								fieldLabel: '<b>X</b> coefficient5',
								width: '80%',
	                            name: 'c5',
	                            id: 'c5',
								value: '1.05',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							}]
                        }]
                    },{
								fieldLabel: 'Other coefficient',
								width: '80%',
	                            name: 'otherCo',
	                            id: 'otherCo',
	                            xtype: 'numberfield',
	                            maxLength: 64,
	                            maxLengthText: 'The length of the text is too long to store.'
							}],
                    
                    
                    buttons: [{
                        text: 'Save',
                        handler: function(){
                            if (tcYarnForm.getForm().isValid()) {
                               
                                document.getElementById('yarnId').value = yarnCombo.getValue();
                                tcYarnForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        //alert(form);
                                        messageTip.msg('Tip', 'Save successfully.');
										tcYarnForm.getForm().reset();
                                        tcYarnStore.load();
                                    },
                                    failure: function(form, action){
                                        //alert(form);
                                        messageTip.msg('Tip', 'Save unsuccessfully.');
                                        //orderForm.show();
                                    }
                                });
                            }
                        }
                    }, {
                        text: 'Reset',
                        handler: function(){
                            tcYarnForm.getForm().reset();
                        }
                    }, {
                        text: 'Cancel',
                        handler: function(){
                              window.location = 'order_edit.html?id=' + tcId;
                        }
                    }]
                });
                tcYarnForm.render('tcYarnForm');
				
				tcYarnStore = new Ext.data.Store({
                
                    url: 'TechnicChartServlet?action=201&id=' + tcRecord.data.id,
                    
                    reader: new Ext.data.XmlReader({
                    
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['index', 'id', {
						name: 'unitPrice',
						type: 'float'
					}, {
						name: 'q1',
						type: 'float'
					},{
						name: 'c1',
						type: 'float'
					},{
						name: 'q2',
						type: 'float'
					},{
						name: 'c2',
						type: 'float'
					},{
						name: 'q3',
						type: 'float'
					},{
						name: 'c3',
						type: 'float'
					},{
						name: 'q4',
						type: 'float'
					},{
						name: 'c4',
						type: 'float'
					},{
						name: 'q5',
						type: 'float'
					},{
						name: 'c5',
						type: 'float'
					},{
						name: 'otherCo',
						type: 'float'
					}, 'yarn']),
                    
                   remoteSort: true
                });
				
				tcYarnGrid = new Ext.grid.GridPanel({
                    title: 'Techinic chart material list',
                    store: tcYarnStore,
                    stripeRows: true,
                    height: 360,
                    columns: [{
                        header: 'Yarn',
                        dataIndex: 'yarn'
                    },{
						header: 'Unit price',
						dataIndex: 'unitPrice',
						align: 'right',
						renderer: eurMoney
					},{
                        header: 'Quantity1',
                        dataIndex: 'q1'
                    },{
						header: 'Coefficient1',
						dataIndex: 'c1'
					},{
                        header: 'Quantity2',
                        dataIndex: 'q2'
                    },{
						header: 'Coefficient2',
						dataIndex: 'c2'
					},{
                        header: 'Quantity3',
                        dataIndex: 'q3'
                    },{
						header: 'Coefficient3',
						dataIndex: 'c3'
					},{
                        header: 'Quantity4',
                        dataIndex: 'q4'
                    },{
						header: 'Coefficient4',
						dataIndex: 'c4'
					},{
                        header: 'Quantity5',
                        dataIndex: 'q5'
                    },{
						header: 'Coefficient5',
						dataIndex: 'c5'
					},{
						header: 'Other coefficient',
						dataIndex: 'otherCo'
					},{
                        header: 'Edit',
                        dataIndex: 'id',
                        width: 40,
                        renderer: renderEdit
                    }, {
                        header: 'Del',
                        dataIndex: 'id',
                        width: 40,
                        renderer: renderDelete
                    }],
                    
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    renderTo: 'tcYarnList'
                });
                
                tcYarnStore.load();
            })
        </script>
    </head>
    <body>
        <div id="technicChartDiv">
        </div>
        <div id="tcYarnForm" style="margin_top: 6px;">
        </div>
		<div id="tcYarnList" style="margin_top: 6px;">
        </div>
    </body>
</html>